import React from 'react'
import {Col, Row, Checkbox} from 'antd'

import {FormattedMessage} from 'react-intl'
import {TwsReactMarkdownPreview} from 'tws-antd'

const MultipleChoice = ({formItemLayout, FormItem, quiz}) => {
  return (
    <Row>
      <FormItem {...formItemLayout} label={<FormattedMessage id='描述' />}>
        <TwsReactMarkdownPreview source={quiz.description} />
      </FormItem>
      <FormItem {...formItemLayout} label={<FormattedMessage id='选项' />}>
        {quiz.choices.map((choice,index) => {
          const {answer, choices} = quiz
          const answers = answer
          return (<Row key={index}>
            <Col span={2}>
              <Checkbox disabled
                defaultChecked={answers.some(answer => parseInt(answer, 10) === index)}
              />
            </Col>
            <Col span={20}>
              <span>{choices[index]}</span>
            </Col>
          </Row>)
        })}
      </FormItem></Row>)
}

export default MultipleChoice
